<!-- 添加演员角色 -->
<!-- 添加演员角色 -->
<template>
  <div style="width: 100%">
    <div style="position: absolute; top: -36px; right: 0">
      <el-button size="small" type="primary" @click="addAvgDurationClick">新增角色</el-button>
    </div>
    <box-from-border minHeight="198px" style="align-items: flex-start; justify-content: flex-start; width: 100%; min-height: 220px; padding-bottom: 10px">
      <div v-if="performerRoleList.length > 0" class="avg-duration-list">
        <div
          v-for="(item, index) in performerRoleList"
          :key="index"
          class="avg-duration-item"
          :class="{ 'avg-duration-item-disabled': disabled }"
          @click="editAvgDurationClick(index, item)"
        >
          <base-image :src="item.staffHeadImage" class="img">
            <template #error>
              <img src="@/assets/images/account/avatar.svg" class="img" />
            </template>
          </base-image>
          <div class="text-box">
            <span class="name text">{{ item.name }}</span>
            <span v-if="item.role" class="role text">{{ item.staffSex === 1 ? '男' : '女' }}</span>
            <span v-if="item.role" class="role text">饰{{ item.role }}</span>
          </div>
          <div v-if="!disabled" class="close">
            <el-icon color="#ffffff" size="12" style="margin-top: 8px; transform: rotate(-45deg)" @click="closeClick(index)">
              <icon-ep-close></icon-ep-close>
            </el-icon>
          </div>
        </div>
      </div>
      <div v-else style="display: flex; align-items: center; justify-content: center; width: 100%">
        <base-empty description="点击新增按钮添加数据" :imageSize="100" style="--el-empty-description-margin-top: 0"></base-empty>
      </div>
    </box-from-border>
    <!-- 添加 -->
    <add-avg-duration ref="addAvgDurationRef"></add-avg-duration>
  </div>
</template>

<script setup lang="ts">
  import type { PerformerRole } from '@/api/drama-management';
  import AddAvgDuration from './add-avg-duration.vue';
  import IconEpClose from '~icons/ep/close';

  const props = defineProps({
    /** 点击tab键是否关闭并切换到下一个弹出框 */
    modelValue: { type: Array as PropType<PerformerRole[]>, default: () => [] },
    /** 禁用 */
    disabled: { type: Boolean, default: false },
  });
  const emit = defineEmits<{
    (e: 'update:modelValue', value: PerformerRole[]): void;
  }>();
  const performerRoleList = ref(props.modelValue);

  watch(
    () => props.modelValue,
    (val) => {
      performerRoleList.value = val;
    }
  );

  watch(
    () => performerRoleList.value,
    (val) => {
      emit('update:modelValue', val);
    }
  );

  const addAvgDurationRef = ref<InstanceType<typeof AddAvgDuration> | null>(null);

  /** 新增 */
  function addAvgDurationClick() {
    addAvgDurationRef.value?.show({
      addCallBack(res: PerformerRole) {
        performerRoleList.value.push(res);
      },
    });
  }

  /** 修改 */
  function editAvgDurationClick(index: number, performerRole: PerformerRole) {
    if (props.disabled) {
      return;
    }
    addAvgDurationRef.value?.show({
      performerRole,
      addCallBack(res: PerformerRole) {
        performerRoleList.value[index] = res;
      },
    });
  }
  /** 删除 */
  function closeClick(index: number) {
    performerRoleList.value.splice(index, 1);
  }
</script>

<style lang="scss" scoped>
  .avg-duration-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    grid-gap: 15px;
    width: 100%;
    padding-top: 8px;

    .avg-duration-item {
      position: relative;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
      padding: 12px 10px;
      overflow: hidden;
      cursor: pointer;
      border: 1px solid var(--el-border-color);
      border-radius: 6px;
      box-shadow: var(--el-box-shadow-light);

      .close {
        position: absolute;
        top: -6px;
        right: -15px;
        z-index: 2;
        width: 40px;
        height: 24px;
        text-align: center;
        background: var(--el-color-danger);
        transition: all 0.2s;
        transform: rotate(45deg);
      }

      .img {
        width: calc(var(--my-change-2x-size) + 32px);
        height: calc(var(--my-change-2x-size) + 32px);
        margin-bottom: calc(var(--my-change-2x-size) + 4px);
        border-radius: 20px;
      }

      .text-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;

        .text {
          display: inline-block;
          width: 50px;
          overflow: hidden;
          line-height: 1.6em;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;

          &.name {
            font-size: calc(var(--my-change-2x-size) + 8px);
            color: var(--el-text-color-primary);
          }

          &.role {
            font-size: calc(var(--my-change-2x-size) + 6px);
            color: var(--el-text-color-regular);
          }
        }
      }
    }

    .avg-duration-item-disabled {
      cursor: default;
    }
  }
</style>
